<template>
  <div>
    <el-form :inline="true" :model="formInline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="formInline.region" filterable clearable placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <hr />
    <div class="learn-drawer-personnel-box">
      <el-table :data="dataList" style="width: 100%" stripe max-height="230" how-overflow-tooltip>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" prop="realname" label="姓名" width="180"></el-table-column>
        <el-table-column prop="gender" header-align="center" align="center" width="80" label="性别">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.gender==1">男</el-tag>
            <el-tag v-else-if="scope.row.gender==2">女</el-tag>
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="deptName" label="职务" width="180"></el-table-column>
        <el-table-column prop="mobile" label="手机号码"></el-table-column>
      </el-table>
      <el-pagination :total="5" :current-page="page" layout="prev, pager, next"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'assignPeople',
  data() {
    return {
      value: 0,
      page: 1,
      pageSize: 10,
      dataList: [],
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  mounted() {
    this.getUserList()
  },
  methods: {
    onSubmit() {
      this.$refs['basicData'].validate(valid => {
        if (valid) this.step = 1
      })
    },
    // 获取用户列表
    getUserList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/usercenter-admin/user/list'),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize
        }
      }).then(res => {
        this.dataList = res.data.list
        this.totalCount = res.data.totalCount
        // var list = []
        // for (let i = 0; i < this.userList.length; i++) {
        //   for (let j = 0; j < this.dataForm.userList.length; j++) {
        //     if (this.userList[i].userId == this.dataForm.userList[j].userId) {
        //       list.push(this.userList[i])
        //     }
        //   }
        // }
        // this.selectUserList[this.pageIndex - 1] = list

        // // 用户选中状态回显
        // let rows = this.selectUserList[this.pageIndex - 1]
        // if (rows) {
        //   rows.forEach(row => {
        //     for (let i = 0; i < this.userList.length; i++) {
        //       if (row.userId == this.userList[i].userId) {
        //         this.$nextTick(function () {
        //           this.$refs.multipleTable.toggleRowSelection(this.userList[i])
        //         })
        //       }
        //     }
        //   })
        // }
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getUserList()
    },

    // 用户列表翻页
    currentUserChangeHandle(val) {
      this.pageIndex = val
      this.getUserList()
    },
    // 多选用户
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.selectUserList[this.pageIndex - 1] = val
    }
  }
}
</script>
